<!--
 * @description  :公共附件上传
 * @descriptionDetail:公共附件上传
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-07-12 10:57:44
-->
<template>
  <view class="page">
    <theme-navbar :isWhite="true" backText="返回" title="附件上传"></theme-navbar>
    <view class="up-top">
      <view class="up-text">
        {{ upTitle }}
      </view>
      <view>
        <u-icon class="img-icon" name="man-add-fill" color="#999999" size="38"></u-icon>
        <view class="name-min">
          高美
        </view>
        <view class="-min">
          202101-27
        </view>
      </view>
    </view>
    <view class="up-image">
      <u-upload class="upload" :custom-btn="true" :show-upload-list="showUploadList" :action="action" ref="uUpload"> 
        <view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150" slot="addBtn">
          <view class="border-rad">
            <u-icon name="plus" size="40" color="#A7A7A8"></u-icon>
          </view>
          <view class="uptxt">
            上传
          </view>
        </view> 
      </u-upload> 
    </view>
  </view>
</template>

<script> 
/**
* upTitle 文书列表页面子条目中的标题 
* @description 子标题,例如：证据先行登记保存批准书、检查(勘检)笔录、证据复制(提取)单、询问笔录，初始给一个默认
* @property {String} 
*/
export default { 
  name:"UpLoadImage",
  props: {
    upTitle:{
      type:String,
      default:function(){
        return "证据先行登记保存批准书"
      },
    },
  }, 
  data() {
    return { 
      // 如果将某个ref的组件实例赋值给data中的变量，在小程序中会因为循环引用而报错
      // 这里直接获取内部的lists变量即可
      lists: [], 
      showUploadList:false,
      action: '', // 上传地址
    };
  },
  // 只有onReady生命周期才能调用refs操作组件
  onReady() {
    // 得到整个组件对象，内部图片列表变量为"lists"
    this.lists = this.$refs.uUpload.lists;
  },
  methods: { 
  },
};
</script>

<style lang="scss" scoped>
.up-top {
  padding: 32rpx 30rpx;
  .up-text {
    font-size: 40rpx;
    margin-bottom: 16rpx;
  }
  .img-icon {
    vertical-align: middle;
  }
  .name-min {
    margin: 0 20rpx 0 16rpx;
  }

  view[class$="-min"] {
    display: inline-block;
    vertical-align: middle;
    color: $font-color-disabled;
    font-size: 32rpx;
  }
}
.up-image {
  position: relative;
  height: auto;
  padding: 40rpx 30rpx;
  border-top: 3rpx solid $uni-text-color-disable;
  border-bottom: 2rpx solid $border-color-dark;
  .upload{
    position: relative;
    width: 260rpx;
    height: 260rpx;
    display: inline-block;
    background-color: $uni-bg-color-grey; 
    border-radius: 20rpx;
    .border-rad{
      position: absolute;
      top: 39%;
      left: 50%;
      padding: 10rpx;
      transform: translate(-50%,-61%);
      border-radius: 50%;
      border: 4rpx solid $font-color-disabled; 
    }
    .uptxt{
      position: absolute;
      top: 55%;
      left: 36%;
      z-index: 99;
      font-size: 32rpx;
      color: $font-color-disabled;
    }
  }
  .image-default{
    position: absolute;
    left: 2%;
    top: 3%;
    width: 120px;
    height: 120px;
  }
}
</style>